<template>
	<view>
		<u-navbar :title="title1" :autoBack="true" placeholder></u-navbar>
		<u-notice-bar :text="text1" bgColor="#fdf6ec" color="#DFA156" fontSize="28rpx" mode="closable"></u-notice-bar>
		<view class="">
			<view class="form">
				<view class="form__item">
					<u-icon name='weixin-circle-fill' color="#02c48d" size="40rpx"></u-icon>
					<view class="form__item__text">
						点我填写联系方式，方便其他同学联系
					</view>
					<image src="/static/home/back.png" @click="iszk=!iszk" class="form__item__icon"
						:class="iszk?'zk':''" mode=""></image>
				</view>
				<view :class="!iszk?'fromzk':''" style="overflow: hidden;" class="formbox">
					<view class="form__item">
						<view class="form__item__label">
							联系姓名
						</view>
						<input type="text" class="form__item__inp" placeholder="联系人" v-model="form.name" />
					</view>
					<view class="form__item">
						<view class="form__item__label">
							联系方式
						</view>
						<view class="u-flex u-flex-y-center">
							<view class="form__item__fs" v-for="(item,index) in fslist" :key="index"
								@click="curfs=index" :class="curfs==index?'active':''">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="form__item" v-if="curfs==0">
						<view class="form__item__label">
							手机号码
						</view>
						<input type="number" maxlength="11" class="form__item__inp" placeholder="手机号" v-model="form.phone" />
					</view>
					<view class="form__item" v-if="curfs==1">
						<view class="form__item__label">
							微信账号
						</view>
						<input type="text" class="form__item__inp" v-model="form.wechat" maxlength="20" placeholder="4~20位微信号" />
					</view>
					<view class="form__item" v-if="curfs==2">
						<view class="form__item__label">
							QQ账号
						</view>
						<input type="number" class="form__item__inp" placeholder="6~15位QQ号" v-model="form.qq" maxlength="15" />
					</view>
				</view>
			</view>
			<view class="ts">
				禁止发布重复信息，广告营销类，含二维码等内容
			</view>
			<view class="form" style="margin-bottom: 20rpx;">
				<view class="form__item">
					<view class="form__item__label">
						<text class="form__item__label__bt">*</text>标题
					</view>
					<input type="text" class="form__item__inp" v-model="form.title" maxlength="20" placeholder="精确描述你的需求,4-20字" />
				</view>
				<u--textarea v-model="form.content" placeholder="请输入内容" autoHeight count border='none'
					placeholderStyle='font-size:26.21rpx;'></u--textarea>
				<view class="" style="height: 100rpx;">

				</view>
				<u-upload width='168rpx' height='168rpx' :fileList="fileList1" @afterRead="afterRead"
					@delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
			</view>
			<u-gap height="20rpx" bgColor="#FAFAFA"></u-gap>
			<view class="form">
				<view class="form__item" @click="show=true">
					<image src="/static/home/infoht.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view class="form__item__text" style="color: #333;">
						主题分类
					</view>
					<view class="form__item__value">
						{{ht?ht:'请选择'}}
					</view>
					<u-icon name='arrow-right' size="33rpx"></u-icon>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer__text">
				*请自觉遵守<text style="color: #5D84E1;">《社区规范》. </text>如有违规会被删帖、禁言、关小黑屋*
			</view>
			<u-button :customStyle='{height:"85.31rpx",width:"630rpx",fontSize:"28rpx",color:"#fff",fontWeight:"bold"}'
				text="发布" color="#5D84E1" @click="fabu"></u-button>
		</view>
		<!-- 话题选择弹框 -->
		<u-popup :show="show" round="10rpx" bgColor='#f9f9f9' closeable @close="show=false">
			<view class="popbox">
				<view class="popbox__title">
					选择主题
				</view>
				<scroll-view scroll-y="true" class="popbox__list">
					<view class="u-flex u-flex-y-center u-flex-between u-flex-wrap">
						<view class="popbox__list__item" v-for="(item,index) in htlist"
							@click="curht=index,show=false,ht=item.name,form.cate_id=item.id" :class="curht==index?'active':''" :key="index">
							<image src="/static/home/ht1.png" v-if="curht!=index" class="popbox__list__item__icon"
								mode=""></image>
							<image src="/static/home/ht2.png" v-else class="popbox__list__item__icon" mode=""></image>
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 发布提示 -->
		<u-modal :show="show1" title="提示" @cancel="show1=false" @confirm="confirm" showCancelButton
			confirmColor='#5B6C8A' cancelColor='#000000'>
			<view class="modbox">
				帖子发表成功后，将在五分钟后推 送给所有群聊
			</view>
		</u-modal>
		<!-- 消息通知弹框 -->
		<u-popup :show="show2" round="10rpx" closeable @close="show2=false,navto('/pages/tabbar/home',2)" :closeOnClickOverlay='false'>
			<view class="popbox u-flex u-flex-column u-flex-items-center">
				<view class="popbox__title">
					关注微信公众号接收消息通知
				</view>
				<view class="popbox__tip">
					立即关注【今日校果公众号】</br>
					以便接收到其他同学的回复和评论消息
				</view>
				<view class="popbox__qrbox">

				</view>
				<view class="popbox__footer">
					{{title1}}校果@2025
				</view>
			</view>
		</u-popup>
		<wanshan ref="wanshan"></wanshan>
	</view>
</template>

<script>
	import home from '@/api/_home.js'
	export default {
		data() {
			return {
				fileList1: [],
				show2: false,
				show: false,
				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				curfs: 0,
				show1: false,
				fslist: [{
						name: '手机号码',
						type: 0
					},
					{
						name: '微信账号',
						type: 1
					},
					{
						name: 'QQ账号',
						type: 2
					},
				],
				ht: '',
				htlist: [],
				curht: null,
				value3: '',
				iszk: false,
				form: {
					cate_id:'',
					school_id:uni.getStorageSync('xguserinfo').school_id,
					title:'',
					content:'',
					images:'',
					name:'',
					phone:'',
					wechat:'',
					qq:''
				}
			};

		},
		methods: {
			fabu() {
				// 判断是否完善
				if (!this.mobile) {
					this.$refs.wanshan.open()
					return
				}
				this.show1 = true
			},
			async confirm() {
				let arrimgs=[]
				this.fileList1.map(t=>{
					arrimgs.push(t.url)
				})
				this.form.images=arrimgs.join(',')
				console.log(this.form)
				let {title,cate_id,content} = this.form
				if(title.length<4){
					uni.$u.toast('请填写4~20字的标题')
					return
				}
				if(!content){
					uni.$u.toast('请填写内容')
					return
				}
				if(!cate_id){
					uni.$u.toast('请选择主题分类')
					return
				}
				uni.showLoading({
					title:'发布中'
				})
				this.show1 = false
				
				let res = await home.createInfo(this.form)
				uni.hideLoading()
				if(res.data.code==1){
					this.show2 = true
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "http://we.fuliaoxx.com/api/common/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							user: uni.getStorageSync('xguserinfo').username,
						},
						header:{
							token:uni.getStorageSync('xgtoken')
						},
						success: (res) => {
							setTimeout(() => {
								if(JSON.parse(res.data).code==1){
									resolve(JSON.parse(res.data).data.url);
								}else{
									uni.$u.toast('上传失败')
								}
								
							}, 1000);
						},
					});
				});
			},
			async getfl() {
				let res = await home.cate()
				if (res.data.code == 1) {
					this.htlist = res.data.data
					this.show = true
				}
			},
		},
		onLoad() {
			this.getfl()
		}
	}
</script>

<style lang="scss">
	.form {
		padding: 0 27rpx;
		background-color: #fff;

		&__item {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #F6F6F6;
			height: 97rpx;

			&__text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #373538;
				flex: 1;
				margin-left: 11rpx;
			}

			&__icon {
				width: 30rpx;
				height: 30rpx;
				transition: transform 0.5s ease;
			}

			&__label {
				width: 200rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #909193;

				&__bt {
					color: #E42832;
				}
			}

			&__inp {
				flex: 1;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #000;
			}

			&__fs {
				border: 1rpx solid #909193;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #909193;
				padding: 10rpx;
				margin-right: 10rpx;
			}

			.active {
				color: blue;
				border-color: blue;
			}

			&__value {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #9D9D9D;
			}
		}
	}

	.ts {
		width: 750rpx;
		height: 80rpx;
		background: #F5F4F9;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #BFC0C4;
	}

	.zk {
		transform: rotate(-90deg)
	}

	.formbox {
		height: 294rpx;
		transition: height 0.5s ease-in-out
	}

	.fromzk {
		height: 0;
		transition: height 0.5s ease-in-out
	}

	::v-deep.u-textarea {
		padding: 42rpx 0 0;
	}

	::v-deep.u-textarea__count {
		bottom: -60rpx !important;
	}

	page {
		background-color: #f9f9f9;
	}

	.footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 64rpx 0;

		&__text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 21rpx;
			color: #9D9D9D;
			line-height: 22rpx;
			margin-bottom: 64rpx;
		}
	}

	.popbox {
		padding: 0 28rpx;

		&__title {
			text-align: center;
			padding: 36rpx 0;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #000000;
			line-height: 32rpx;
		}

		&__list {
			height: 620rpx;

			&__item {
				width: 341rpx;
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 9rpx 9rpx 9rpx 9rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #757575;
				line-height: 39rpx;
				display: flex;
				align-items: center;
				margin-bottom: 17rpx;

				&__icon {
					width: 31rpx;
					height: 31rpx;
					margin: 0 10rpx 0 30rpx;
				}
			}

			.active {
				background: #5c84fd;
				color: #fff;
			}
		}

		&__tip {
			width: 384.38rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #9F9F9F;
			line-height: 40rpx;
			text-align: center;
			margin: 6rpx 0 30rpx;
		}

		&__qrbox {
			width: 426rpx;
			height: 476rpx;
			border: 1rpx solid #18be6a;
			border-radius: 10rpx;
		}

		&__footer {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #C7C7C7;
			line-height: 40rpx;
			padding: 70rpx 0 16rpx;
			text-align: center;
		}
	}

	.modbox {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #737373;
		line-height: 50rpx;
		text-align: center;

	}
</style>